<template>
  <v-navigation-drawer v-model="drawer" :temporary="true" location="end">
    <v-list-item :title="`呼吸菜单`"></v-list-item>
    <v-divider></v-divider>
    <div class="flex w-full flex-wrap justify-start items-center">
      <div v-for="(citem, index) in list" :key="index" class="w-1/3 pb-[calc(100%/3)] relative shrink-0 text-center">
        <div class="absolute left-0 top-0 w-full h-full p-2">
          <button
            v-if="citem.title"
            v-ripple
            class="w-full h-full text-title text-base flex justify-center items-center rounded-lg p-2 bg-black/50"
            @click="handleSelectWord(citem)"
          >
            {{ citem.title }}
          </button>
        </div>
      </div>
    </div>
  </v-navigation-drawer>
</template>

<script lang="ts" setup name="ShuLingMenuDrawer">
import { withDefaults } from "vue";
import { computedAsync, useVModel } from "@vueuse/core";
import VIcon from "@/icon/VIcon.vue";
import { items } from "../utils";
import * as api from "@/api/word";
import { watch } from "vue";
const emit = defineEmits<{
  change: [id: number];
}>();

const list = computedAsync(
  async () => {
    const res = await api.getList();
    return res.data;
  },
  [],
  {
    lazy: true,
  }
);

const props = withDefaults(
  defineProps<{
    drawer: boolean;
    wordId: number;
  }>(),
  {}
);

const drawer = useVModel(props, "drawer");

const wordId = useVModel(props, "wordId");

watch(
  () => list.value,
  () => {
    if (list.value.length > 0) {
      wordId.value = list.value.at(0)?.id!;
    }
  }
);

const handleSelectWord = (word: api.Iword) => {
  if (wordId.value !== word.id) {
    wordId.value = word.id;
    emit("change", word.id);
  }
};
</script>
<style lang="scss">
.word-item {
  background-color: #ff3cac;
  background-image: linear-gradient(225deg, #ff3cac 0%, #784ba0 50%, #2b86c5 100%);
}
</style>
